<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>ajax例程</title>
    <!-- 引入bootsrap css -->
    <link rel="stylesheet" type="text/css" href="../lib/bootstrap/css/bootstrap.css">
    <link rel="stylesheet" type="text/css" href="../lib/easyui/themes/icon.css">
    <link rel="stylesheet" type="text/css" href="../lib/easyui/themes/bootstrap/easyui.css">
    <!--  定义页面样式  -->
    <style type="text/css">
        form {color:green}
    </style>
    <!--  引入外部的js库-->
    <script src="../lib/easyui/jquery.min.js"></script>
    <script src="../lib/easyui/jquery.easyui.min.js"></script>
    <script src="../lib/easyui/locale/easyui-lang-zh_CN.js"></script>
</head>
<body>
<button id="btn1" class="btn btn-lg btn-danger">ajax</button>
<button id="btn2" class="btn btn-lg btn-danger">get请求</button>
<button id="btn3" class="btn btn-lg btn-danger">post请求</button>
<input id="result_txt" class="easyui-textbox" />
<hr>
<button id="btn4" class="btn btn-lg btn-danger">登录</button>
<div id="dlg1"></div>
<hr>
<table id="books"></table>
<script>
    $(function(){
        $('#books').datagrid({
            url:"books.json",
            fitColumns:true,//自动扩大或缩小列的尺寸以适应网格的宽度并且防止水平滚动。
            pagination:true,//在数据网格底部显示分页工具栏。
            rownumbers:true,//显示带有行号的列
            pageNumber: 1,//当设置了pagination属性时，初始化页码
            pageSize: 1,//	当设置了pagination属性时，初始化页面尺寸。
            pageList: [1, 15, 20, 30, 40, 50, 60, 70, 80, 100, 200],//当设置了 pagination 属性时，初始化页面尺寸的选择列表。
            columns:[[
                {field:'code',title:'代码',width:100},
                {field:'name',title:'书名',width:100},
                {field:'price',title:'价格',width:100,align:'right'}
            ]],//列的字段名，标题文本，宽度，如何对齐该列的数据
            onClickRow:function(index, row){   //点击行触发事件，index为被点击行的索引，row为被点击行对应的数据
                console.log(index),
                console.log(row)
                $('#dlg1').dialog({
                    title: '书籍详情',
                    width: 400,
                    height: 400,
                    closed: false,
                    cache: false,
                    href: 'book.html',
                    modal: true
                })
                setTimeout(function(){
                    $('#form2').form('load',row)//加载记录填充表单
                },150)//150毫秒后调用function函数

            }
        })

        $('#btn4').click(function(e){
            $('#dlg1').dialog({
                title: '登录',
                width: 400,
                height: 400,
                closed: false,
                cache: false,
                href: 'dialog.html',
                modal: true
            })
        })

        //get方法将请求携带数据加在url后
        $('#btn2').on('click',function(e){
            $.get('ajaxget.json',function(data){   //data是服务器访问成功之后的返回的响应数据
                console.log(data)
                if(data.code === 1){
                    $('#result_txt').textbox('setValue',data.msg)
                }else{
                    //$.messager.alert('系统提示',data.msg,'error')
                }
            })
        })

        //post方法将请求携带数据加在formdata里
        $('#btn3').on('click',function(e){
            $.post("ajaxpost.json",{},function(data){
                console.log(data)
                if(data.code === 1){
                    $('#result_txt').textbox('setValue',data.msg)
                }else{
                    //$.messager.alert('系统提示',data.msg,'error')
                }
            })
        })

        $('#btn1').on('click',function(e){
            //ajax方法使用一个参数
            $.ajax({
                url:'ajaxdata.json', //服务器接口 url
                data:{username:'yzl',password:'1234'},// 请求携带参数，是一个json的object
                dataType:'json', // 响应数据的期望类型
                type:'post', // 请求的方式，默认是get方法
                success:function(data){
                    console.log(data)
                    if(data.code === 1){
                        $('#result_txt').textbox('setValue',data.msg)
                    }else{
                        $.messager.alert('系统提示',data.msg,'error')
                    }
                },//请求成功的回调函数
                error:function(xhr,status,error){
                    $.messager.alert('系统提示','系统错误,请联系系统管理员:' + error,'error')
                    console.log(xhr);
                    console.log(status);
                    console.log(error);
                }//请求失败的回调函数
            });
        })
    })
</script>
</body>
</html>